<template>
  <div class="page">
    <m-header :title="langText&&langText.home" >
      <select class="sel" v-model="langId" @change="getselLang()">
        <option v-for="item in langList" :key="item.id" :value="item.id">{{item.lang}}</option>
      </select>
    </m-header>
    <section class="body">
      <scroller 
            ref="my_scroller"
            :on-refresh="refresh"
            :on-infinite="infinite">
        </scroller>
      <p class="notice" @click="notice()"> 
        <!-- <i class="iconfont iconnotice"></i> -->
        <i class="iconfont icongonggao2 mark"></i>
        <span>{{langText&&langText.announcement}} :</span>
          <ul class="notice-list" :style="'-webkit-transform:translateY('+move+');transition:all '+moveTime+'s;'">
              <li class="notice-item" v-for="(item,index) in noticeList" :key="index" >{{item.title}}</li>
          </ul>
        <span class="notice-right" @click="$router.push('/pan-gold/notice')">{{langText&&langText.more}} <img :src="i_img" alt="" class="i_img"> </span>
      </p>

      <!-- <div class="banner_box">
        <img class="banner" :src="bannerUrl&&api+bannerUrl" alt>
      </div> -->
      
      <swiper :options="swiperOption" class="swiper-wrap" ref="mySwiper" v-if="bannerUrl.length!=0">
        <swiper-slide v-for="(item, index) in bannerUrl" :key="index">
          <img :src="api+item" class="title-img" />
        </swiper-slide>

        <div
          class="swiper-pagination"
          v-for="(item,index) in bannerUrl"
          :key="index"
          slot="pagination"
        ></div>
      </swiper>
      
      <div class="box">
        <div class="box-1">
          <div class="box-left">
            <!-- <img :src="img_left" alt=""> -->
            <div class="box_r">
              <i class="iconfont iconzonghedanjia mark"></i>
            </div>
            <div class="box-content">
              <span class="box-title">{{langText&&langText.fcunitprice}}</span>
              <span>{{showData.rate}}</span>
            </div>
          </div>

          <div class="box-right">
            <div class="box_r">
                <i class="iconfont iconshouyi mark"></i>
            </div>
            <div class="box-content">
              <span class="box-title">{{langText&&langText.freezerevenue}}</span>
              <span>{{showData.lock_jdjl}} {{langText&&langText.usdt}}</span>
            </div>
          </div>
        </div>

        <div class="box-2">
          <span>{{langText&&langText.fctokencirculation}}</span>
          <span class="box2-right">{{showData.fclt}}</span>
        </div>

        <div class="box-3" v-for="(item,index) in showData.tc" :key="index">
          <div class="box3_left">
            <img :src="api+item.image" alt="">
          </div>
          <div class="box3_right">
              <p class="title">{{item.name_cn}}</p>
              <p>{{langText&&langText.price}}：{{item.price}}</p>
              <p class="hh">{{langText&&langText.dailyincome}}：{{item.per2}}%~{{item.per3}}%</p>
              <button class="btn-submit btn-origin r_btn" @click="$router.push({name:'HashrateDetail',query:{id:item.id}})">{{langText&&langText.buynow}}</button>
          </div>
          <img :src="box3_src" alt="" class="box3_src">
          <p class="box3_src_p">{{langText&&langText.recommend}}</p>
        </div>

        <div class="box-4">
          <div class="top">
            <div class="title">{{langText&&langText.latestmarket}}</div>
            <div class="top_bgc"></div>
          </div>

          <div class="bot">
            <div class="content" v-for="(item,index) in price" :key="index">
              <p class="title">{{item.type}}</p>
              <span>≈{{item.price}} {{langText&&langText.usdt}}</span>
            </div>
          </div>
          <p class="bott">{{langText&&langText.statement}}</p>
        </div>

      </div>

    </section>
    <m-Footer>{{a}}</m-Footer>
    <m-load ref="load"></m-load>

  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { Init, Index, Owner,Base } from '@/server/server.js';
import { IndexTxt,Hashrate } from "@/assets/commonjs/lan.js";
import {Util,Load} from '@/assets/commonjs/utils.js';
import {mapGetters} from 'vuex';
require("swiper/dist/css/swiper.css"); //引入swiper.css
export default {
  components: {
    swiper,
    swiperSlide
  },
  data(){
      return {
        a:null,
        list:null,
        price:null,
        levelArr:[],
        timeInt:null,
        mineInt:null,
        mineFlag:true,
        bookFlag:true,
        orderFlag:true,
        msg:null,
        noticeList:[],
        move:0,
        moveTime:3,
        showData:{
          rate:null,
          lock_jdjl:null,
          fclt:null
        },
        moveInter:null,
        bannerUrl:[],
        allTxt:null,
        defaultBanner:require('@/assets/images/gzlz/banner.png'),
        i_img:require('@/assets/images/hzlz/my_ico_next.png'),
        img_left:require('@/assets/images/hzlz/sy_icon_chanchu.png'),
        box3_src:require('@/assets/images/hzlz/tj1.png'),
        langText:null,
        langType: "zh-cn",
        lang2:'en',
        langId: null,
        swiperOption: {
        loop: true,
          autoplay: {
            delay: 2500,
            stopOnLastSlide: false,
            /* 触摸滑动后是否继续轮播 */
            disableOnInteraction: false
          },
          // 分页器设置
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
            type: "bullets"
          }
        },
        langList: [
          {
            id: 1,
            lang: "简体中文"
          },
          {
            id: 2,
            lang: "English"
          },
        ],
      }
  },
  created(){
    this.getBanner();
  },
  mounted() {
      this.getTitle();
      this.initData();
      this.getPrice();
      this.getShowData();
      // this.setLanguage2()
      this.getlang();
  },
  computed: {
    ...mapGetters(["uid","api",'getLangId','userInfo'])
  },
  methods: {
    getlang(){
      Base.getlang().then(res=>{
        if(res.code==1){
          this.langText = Object.assign({},res.data.home,res.data.menu,res.data.currency,res.data.nodepower,)
          setTimeout(()=>{
            
            localStorage.setItem('homeText',JSON.stringify(this.langText));
          },200)
        }else{
          mui.toast(res.msg)
        }
      })
    },
    refresh(){
        setTimeout(() => {
            this.$refs.my_scroller.finishPullToRefresh();
            mui.toast('加载完毕！')
        }, 1000);
    },
    getPrice(){
      Index.getPrice().then(res=>{
        if(res.code==1){
          this.price = res.data;
        }
      })
    },
    initData(){
      
      if(localStorage.getItem("langId_a" )){
        this.langId = localStorage.getItem("langId_a" )
      }
      this.allTxt = Object.assign({},IndexTxt,Hashrate)
      if(localStorage.getItem('lang_id')){
        this.langId = localStorage.getItem('lang_id')=='zh-cn'?1:2;
      }else{
        this.langId = 2;
      }
    },
    getShowData(){
      Owner.getShowData().then(res=>{
        if(res.code==1){
          this.showData = res.data;
        }
      })
    },
    infinite(){},
    goTo(routeName) {
      this.$router.push({name:routeName});
    },
    getTitle(){
        Index.getTitle({type:'mh'}).then(res=>{
            if(res.code == 1){
                this.noticeList = res.data;
            }else {
              mui.toast(res.msg);
            }
        })
    },
    notice(){
        this.$router.push({name:'Notice',query:{type:'mh'}});
    },
    getBanner(){
      Index.getBanner().then(res=>{
          if(res.code == 1){
            // if(res.data && res.data.banner_img && res.data.banner_img!='')
            // this.bannerUrl = res.data.banner_img;
            // this.bannerUrl = res.data[0];
            this.bannerUrl = res.data;
            // console.log(this.api+this.bannerUrl)
            setTimeout(()=>{console.log(this.bannerUrl,res.data[0])},500)
            
          }
      })
    },
    
    getselLang() {
      switch (this.langId) {
        case 1:
          this.lang2 = 'zh-cn';
          this.setLanguage2();
          
          localStorage.setItem("langId_a", this.langId);
          // this.$store.commit("saveLangId", this.langType);
          // localStorage.setItem("langId", this.langType);
          break;
        case 2:
          this.langType = "en";
          this.lang2 = 'en';
          this.setLanguage2();
          localStorage.setItem("langId_a", this.langId);
          // this.$store.commit("saveLangId", this.langType);
          // localStorage.setItem("langId", this.langType);
          break;
      }
    },
    
    setLanguage2() {
      Base.setLanguage2({ lang:this.lang2 }).then(res => {
        if (res.code == 1) {
          this.getlang();
          localStorage.setItem('lang_id',this.lang2)
          setTimeout(()=>{this.$router.go(0)},100)
        }
      });
    },
    
  },
  
  beforeRouteLeave (to, from, next) {
      clearInterval(this.mineInt);
      next();
    }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  line-height: 36px;
  background-color: @bg-color;
  .notice {
        position: relative;
        margin:0 2%;
        height: 40PX;
        line-height: 40PX;
        // color: #333;
        // color: white;
        font-size: 24px;
        // background:rgba(255,255,255,.7);
        padding-left: @padding-primary;
        border-radius:40px;
        overflow: hidden;
        padding-left:5%;
        i,span {
            vertical-align: middle;
            color: #000 !important;
        }
        .mark{
          color: #4EB6AD !important;
          // font-size: 99px;
        }
        .notice-list {
            position: absolute;
            background: transparent;
            left: 170px;
            top: 0;
            width: 82%;

        }
        .notice-item {
            // color: @bg-color;
            // color: white;
            color: #000;
            background: transparent;
            font-size: 24px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .notice-right{
          position: absolute;
          right: 20px;
          color: #999999 !important;
            // vertical-align:middle;
            // display:inline-block;
            // line-height: 40px;
          .i_img{
            width: 12px;
            vertical-align:middle;
            display:inline-block;
            line-height: 40px;
            margin-top:-3px;
            // float: none;
          }
        }
    }
  .banner_box{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 300px;
    .banner {
      width: 100%;
      height: 300px;
    }
  }
  .swiper-wrap{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 300px;
    z-index: 99;
    img{
      width: 100%;
      height: 300px;
    }
  }

  .msg {
        width: 100%;
      text-align: center;
      margin-top: 20%;
  }
  .box{
    padding: 0 20px;
    margin-top: 20px;
    margin-bottom: 30px;
    .box-1{
      display: flex;
      justify-content: space-between;
      >div{
        width: 346px;
        height: 150px;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        padding-right: 30px;
      }
      .box-left{
        background-color: #4EB6AD;
        .mark{
          color: #4EB6AD;
        }
      }
      .box-right{
        background-color: #8498E3;
        .mark{
          color: #8498E3;
        }
      }
      .box_r{
        width: 80px;
        height: 80px;
        margin-top: 35px;
        margin-left: 20px;
        border-radius: 50%;
        background-color: #fff;
        display: inline-block;
        text-align: center;
        line-height: 80px;
        i{
          font-size: 40px;
        }
      }
      .box-content{
        padding-top: 40px;
        width: 200px;
        color: #fff;
        font-weight: normal !important;
        font-size: 20px;
        span{
          display: block;
        }
        span{
          margin-bottom: 0;
        }
        .box-title{
          font-size: 26px;
          font-weight: 540;
        }
      }
    }
    .box-2{
      width:710px;
      height:78px;
      background:rgba(255,255,255,1);
      box-shadow:0px 6px 10px 0px rgba(78,182,173,0.15);
      border-radius:10px;
      display: flex;
      justify-content: space-between;
      padding: 20px;
      margin-top: 20px;
      font-weight: 400;
      .box2-right{
        font-size:32px;
        font-family:PingFangSC-Medium,PingFangSC;
        font-weight:500;
        color:rgba(132,152,227,1);
        line-height:45px;
      }
    }
    .box-3{
      width:710px;
      // height:208px;
      background:rgba(255,255,255,1);
      border-radius:10px;
      margin-top: 20px;
      padding: 20px;
      display: flex;
      position: relative;
      .box3_src{
        position: absolute;
        right: 0;
        top: 0;
        width: 77px;
        height: 58px;
      }
      .box3_src_p{
        position: absolute;
        right: 0px;
        top: 0px;
        width: 77px;
        height: 58px;
        text-align: center;
        line-height: 58px;
      }
      .box3_left{
        width: 216px;
        height: 168px;
        background-color: #D8D8D8;
        border-radius: 10px;
        display: inline-block;
        img{
          width: 216px;
          height: 168px;
        }
      }
      .box3_right{
        flex: 1;
        height: 100%;
        // display: inline-block;
        // display: flex;
        // justify-content: space-between;
        margin-left: 20px;
        position: relative;
          p{
            // display: inline;
            margin-top: 15px;
            color: #000;
            font-size: 24px;
          }
          .hh{
            width: 60%;
          }
          .title{
            font-weight: 600;
            font-size: 28px;
          }
          .r_btn{
            padding: 13px 27px;
            border-radius: 10px;
            position: absolute;
            bottom: 0;
            right: 0;
          }
      }
    }
    .box-4{
      padding: 20px;
      width:710px;
      // height:320px;
      background:rgba(255,255,255,1);
      border-radius:10px;
      margin-top: 20px;
      .top{
        text-align: center;
        .title{
          width: auto;
          font-size:40px;
          font-weight:550;
          color:rgba(78,182,173,1);
          line-height:56px;
        }
        .top_bgc{
          background:rgba(78,182,173,0.2);
          height: 20px;
          width: 177px;
          margin: -20px auto;
          z-index: -99;
        }
      }
      .bot{
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
        padding: 0 40px;
        .content{
          text-align: center;
          .title{
            font-size:40px;
            font-weight:600;
            color:rgba(51,51,51,1);
            line-height:56px;
          }
          span{
            font-size:24px;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:33px;
          }
          &:nth-child(2){
            // background-color: red;
            border-left: 1px solid rgba(0, 0, 0, 0.2);
            border-right: 1px solid rgba(0, 0, 0, 0.2);
            padding: 0 40px;
          }
        }
      }
      .bott{
        text-align: center;
        color: #000;
        margin-top: 30px;
        color:rgba(153,153,153,1);
      }
    }
  }
}

  .swiper-wrap .title-img {
      height: 300px;width: 100%;
  }
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}

/deep/ .header{
  position: relative;
  
}
.sel{
  color: #000;
  position: absolute;
  top: 0;
  left: 600px;
}
</style>
<style lang="less">
._v-container {
  height: 300px!important;
}
._v-container>._v-content>.loading-layer .spinner-holder .spinner, ._v-container>._v-content>.pull-to-refresh-layer .spinner-holder .spinner{
    margin-top: 0!important;
    fill: white!important;
    stroke: white!important;
    z-index: 1;
}
</style>
